<template>
  <div style="margin: auto"><h1>销售出库</h1></div>
  <div>
    客户
    <el-select v-model="sale.supplier" placeholder="请选择" style="margin-top: 20px">
      <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          @click="findById(item.id)"
      >
      </el-option>
    </el-select>
    <span style="margin-left: 100px">销售员:{{ this.loginUser.name }}</span>
    <span style="margin-left: 20px">订单总额:{{ this.int }}</span><br>
    <span>送货地址:{{ this.customer.address }}</span>
  </div>
  <el-table
      :data="findO"
      height="250"
      border
      style="width: 100%;margin-top: 200px">
    <el-table-column
        prop="product.name"
        label="商品名称名称"
        width="300">
    </el-table-column>
    <el-table-column
        prop="product.brand"
        label="品牌"
        width="200">
    </el-table-column>
    <el-table-column
        prop="product.sellMoney"
        label="建议销售价"
        width="150">
    </el-table-column>
    <el-table-column
        prop="product.num"
        label="采购数量"
        width="150">
      <template #default="scope">
        <el-input v-model="scope.row.num" @blur="updateNum(scope.row);getTotalPrice(this.loginUser.id)"/>
      </template>
    </el-table-column>
    <el-table-column
        label="操作"
        width="200">
      <template #default="scope">
        <el-button type="primary" size="small" @click="del(scope.row.id)">移除商品</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-button type="primary" @click="findByItem(1)" style="margin-top: 60px;margin-left: 50px;size: 20px">添加商品
  </el-button>
  <el-button type="primary" @click="checkout" style="margin-top: 60px;margin-left: 500px;size: 20px">出库</el-button>

  <el-dialog
      v-model="addGoodsDiv"
      title="添加采购商品"
      width="80%"
      center>
    <el-table
        :data="cutObj.records"
        height="250"
        border
        style="width: 100%"
    >
      <el-table-column
          prop="name"
          label="商品名称"
          width="300">
      </el-table-column>
      <el-table-column
          prop="type"
          label="类别"
          width="150">
      </el-table-column>
      <el-table-column
          prop="brand"
          label="品牌"
          width="200">
      </el-table-column>
      <el-table-column
          prop="num"
          label="库存数量"
          width="150">
      </el-table-column>
      <el-table-column
          label="操作"
          width="200">
        <template #default="scope">
          <el-button type="primary" size="small" @click="add(scope.row.id)">添加</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        v-model:currentpage="cutObj.current"
        v-model:page-size="cutObj.size"
        background
        layout="prev, pager, next,jumper"
        :total="cutObj.total"
        @current-change="findByItem">
    </el-pagination>

    <el-button type="primary"
               @click="this.addGoodsDiv=false;this.findByUserId(this.loginUser.id);this.getTotalPrice(this.loginUser.id);"
               style="margin-top: 30px;margin-left: 100px;size: 20px">返回
    </el-button>

    <div class="searchDiv">
      <el-row>
        <el-col :span="10">商品名称<input type="text" v-model="findObj.name"></el-col>
      </el-row>
      <el-row>
        <el-col :span="10" style="margin-top: 20px">类别
          <el-select v-model="findO.type" placeholder="请选择" :value-key="findO.type">
            <el-option
                v-for="item in cutObj.records"
                :key="item.id"
                :label="item.type"
                :value="item.type"
                @click="item.type"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" style="margin-top: 20px">
          <el-button type="primary" @click="findByItem(1)">搜索</el-button>
        </el-col>
      </el-row>
    </div>
  </el-dialog>

  <el-dialog
      v-model="addDiv"
      title=""
      width="20%"
      center>
    <h3>添加成功</h3>
    <el-button type="primary" @click="this.addDiv=false" style="margin-top: 30px;margin-left: 100px;size: 20px">确定
    </el-button>
  </el-dialog>

  <el-dialog
      v-model="delDiv"
      title=""
      width="20%"
      center>
    <h3>出库成功</h3>
    <el-button type="primary" @click="this.delDiv=false" style="margin-top: 30px;margin-left: 100px;size: 20px">确定
    </el-button>
  </el-dialog>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      shop: [],
      findObj: {},
      options: [],
      loginUser: {},
      sale: {},
      saleGoods: {},
      customer: {},
      int: 0,
      cutObj: [],
      addGoodsDiv: false,
      addDiv: false,
      delDiv: false,
      findO: [],
      address: "",
    }
  },
  methods: {
    findByUserId() {
      axios.get("/project/sellCar/findByUserId").then(resp => {
        this.findO = resp.data;
      })
    },
    getLoginUser() {
      axios.get("/project/user/getLoginUser").then(resp => {
        this.loginUser = resp.data;
      })
    },
    findAll() {
      axios.get("/project/client/findAll").then(resp => {
        this.options = resp.data;
      })
    },
    del(id) {
      axios.get("/project/sellCar/del", {
        params: {
          sellCarId: id
        }
      }).then(resp => {
        if (resp.data = "ok") {
          this.getTotalPrice();
          this.findByUserId();
        }
      })
    },
    findById(id) {
      axios.get("/project/client/findById", {params: {id}}).then(resp => {
        this.customer = resp.data;
      })
    },
    getTotalPrice(userId) {
      axios.get("/project/sellCar/getTotalPrice", {params: {userId}}).then(resp => {
        this.int = resp.data;
      })
    },
    findByItem(pageNo) {
      this.findObj.pageNo = pageNo;
      this.addGoodsDiv = true;
      this.findObj.buyMoney = 0;
      axios.get("/project/product/findByItem", {params: this.findObj}).then(resp => {
        this.cutObj = resp.data;
      })
    },
    add(id) {
      axios.get("/project/sellCar/add", {
        params: {
          productId: id,
          userId: this.loginUser.id
        }
      }).then(resp => {
        if (resp.data == "ok") {
          this.addDiv = true;
          this.findByUserId();
          this.getTotalPrice();
        }
      })
      this.addGoodsDiv = false;
    },
    updateNum(obj) {
      axios.get("/project/sellCar/update", {
        params: {
          sellCarId: obj.id,
          num: obj.num,
        }
      }).then(resp => {
        if (resp.data == "ok") {
          this.findByUserId();
          this.getTotalPrice();
        }
      })
    },
    checkout() {
      axios.get("/project/sell/add", {
        params: {
          user: this.loginUser.name,
          address: this.customer.address,
          clientId: this.customer.id
        }
      }).then(resp => {
        if (resp.data == "ok") {
          // this.dialogVisible1 = true;
          this.getTotalPrice();
          this.findByUserId();
          this.address = "";
          this.value = "";
        }
      })
    }
  },
  created() {
    this.getLoginUser();
    this.findByUserId(this.loginUser.id)
    this.getTotalPrice(this.loginUser.id)
    this.findAll();
  }
}
</script>

<style scoped>
.searchDiv {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  margin-left: 500px;

}

</style>